﻿import React, { Component } from 'react';
import { Link, NavLink } from 'react-router-dom';
import { Input, Button, Checkbox, message  } from 'antd';
import axios from 'axios';
import $ from  'jquery'
import './base.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
      logName : '',
      logPswd : '',
      regName : '',
      regPswd : '',
      tip: '发送短信验证码',
      timer: null,
      flag: 'yes',
      msg : ''
    }
  }

  componentDidMount () {
    if (localStorage.getItem('AutoLogin')) {
      this.refs.loginBtn.innerHTML = '注销'
    } else {
      localStorage.removeItem('username')
    }
  }

  logName = (e) => {
    const { value } = e.target;
    this.setState({
      logName : value
    })
  }
  logPswd = (e) => {
    const { value } = e.target;
    this.setState({
      logPswd : value
    })
  }
  regName = (e) => {
    const { value } = e.target;
    this.setState({
      regName : value
    })
  }
  regPswd = (e) => {
    const { value } = e.target;
    this.setState({
      regPswd : value
    })
  }
  AutoLogin (e) {
    console.log(`自动登录按钮状态为 ${e.target.checked}`)
  }
  login () {
    // console.log(this.state.logName)
    // console.log(this.state.logPswd)
    // http://jx.xuzhixiang.top/ap/api/login.php?username=11&password=1212
    // console.log($('.AutoLogin input')[0].checked)
    axios.get('http://jx.xuzhixiang.top/ap/api/login.php?username='+this.state.logName+'&password='+this.state.logPswd)
      .then(data => {
        console.log(data)
        if (data.data.code === 1) {
          if ($('.AutoLogin input')[0].checked === true) {
            localStorage.setItem('username', this.state.logName)
            localStorage.setItem('AutoLogin', 'ok')
            this.refs.loginBtn.innerHTML = '注销'
            $('.shadow').fadeOut(250)
            message.success('登录成功，下次自动登录哟');
          } else {
            localStorage.setItem('username', this.state.logName)
            this.refs.loginBtn.innerHTML = '注销'
            $('.shadow').fadeOut(250)
            message.success('登录成功');
          }
        }else{
          message.error('登录失败');
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
  register () {
    // console.log(this.state.regName)
    // console.log(this.state.regPswd)
    // http://jx.xuzhixiang.top/ap/api/reg.php?username=11&password=1212
    axios.get('http://jx.xuzhixiang.top/ap/api/reg.php?username='+this.state.regName+'&password='+this.state.regPswd)
      .then(data => {
        console.log(data)
        if (data.data.code === 1) {
          $('.register').animate({left:562},250)
          $('.login').animate({left:0},250)
          message.success('注册成功');
        }else{
          message.error('注册失败');
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
  openShadow () {
    // this.refs.shadow.style.display = 'block'
    if (localStorage.getItem('username')) {
      localStorage.removeItem('username')
      localStorage.removeItem('AutoLogin')
      this.refs.loginBtn.innerHTML = '登录'
      message.success('下次再来哟');
    } else {
      $('.shadow').fadeIn(250)
    }
  }
  closeShadow () {
    // this.refs.shadow.style.display = 'none'
    $('.shadow').fadeOut(250)
  }
  goregister () {
    // this.refs.login.style.display = 'none'
    // this.refs.register.style.display = 'block'
    // $('.login').fadeOut(250)
    // $('.register').delay(250).fadeIn(250)
    $('.login').animate({left:-562},250)
    $('.register').animate({left:0},250)
  }
  gologin () {
    // this.refs.register.style.display = 'none'
    // this.refs.login.style.display = 'block'
    // $('.register').fadeOut(250)
    // $('.login').delay(250).fadeIn(250)
    $('.register').animate({left:562},250)
    $('.login').animate({left:0},250)
  }
  sendCode () {
    console.log(this.state.flag)
    if (this.state.flag === 'yes') {
      let time = 59
      this.setState({
        tip : `${time}s后继续发送`
      })
      // document.getElementsByClassName('osendCode')[0].style.backgroundColor = '#ccc'
      this.setState({
        timer : setInterval(() => {
          this.setState({
            flag : 'no'
          })
          this.setState({
            tip : `${time}s后继续发送`
          })
          // document.getElementsByClassName('osendCode')[0].style.backgroundColor = '#ccc'
          time--
          if (time === -1) {
            this.setState({
              tip : '发送短信验证码'
            })
            this.setState({
              flag : 'yes'
            })
            // document.getElementsByClassName('osendCode')[0].style.backgroundColor = '#8BB4C0'
            clearInterval(this.state.timer)
          }
        }, 1000)
      })
      // axios.get('https://www.daxunxun.com/users/sendCode?tel=' + this.state.regName)
      //   .then(data => {
      //     console.log(data)
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })
    }
  }

  goSeek () {
    console.log(this.props)
    console.log(this.refs.seekText.value)
    this.props.history.push('/seek/' + this.refs.seekText.value)
  }

  render () {
    return (
      <div className="BaseHeader">
        <Link to="/musichall">
          <img className="logo" src="http://6.pic.pc6.com/thumb/up/2015-7/201571092758_128_128.jpg" alt="" />
        </Link>
        <ul>
          <li>
            <NavLink to="/musichall">音乐馆</NavLink>
          </li>
          <li>
            <NavLink to="/mymusic">我的音乐</NavLink>
          </li>
          <li>
            <NavLink to="/user">客户端</NavLink>
          </li>
          <li>
            <NavLink to="/apply">音乐号</NavLink>
          </li>
          <li>
            <NavLink to="/VIP">VIP</NavLink>
          </li>
        </ul>
        <div className="seek">
          <input ref="seekText" type="text" placeholder="搜索音乐、MV、歌单、用户" />
          <button onClick={this.goSeek.bind(this)} className="iconfont icon-search"></button>
        </div>
        <div className="user-small">
          <p className="user-login-btn" ref="loginBtn" onClick={ this.openShadow.bind(this) }>登录</p>
        </div>
        <button className="pay">
          开通绿钻豪华版
        </button>
        <button className="pay2">
          开通付费包
        </button>
        <div className="shadow" ref='shadow'>
          <div className="vessel">
            <div className="login" ref='login'>
              <div className="login-text">
                <p className="login-p1">帐号密码登录</p>
                <p className="login-p2 iconfont icon-close" onClick={ this.closeShadow.bind(this) }></p>
              </div>

              <div className="login-input">
                <Input className="log-inp-tips1" placeholder="手机号登录" onChange={ this.logName } size="large"/>
                <Input className="log-inp-tips2" placeholder="密码" onChange={ this.logPswd } size="large"/>
                <Button className="log-inp-tips3" type="primary" block onClick={ this.login.bind(this) }>登录</Button>
              </div>
              <Checkbox onChange={ this.AutoLogin.bind(this) } defaultChecked className="AutoLogin">下次自动登录</Checkbox>
              <p className="login-p3" onClick={ this.goregister.bind(this) }>注册新账号<span className="iconfont icon-arrow_left_fill"></span></p>
            </div>

            <div className="register" ref='register'>
              <div className="register-text">
                <p className="register-p1">注册新账号</p>
                <p className="register-p2 iconfont icon-close" onClick={ this.closeShadow.bind(this) }></p>
              </div>

              <div className="register-input">
                <Input className="reg-inp-tips1" placeholder="手机号" onChange={ this.regName } size="large"/>
                <Input className="reg-inp-tips2" placeholder="密码" onChange={ this.regPswd } size="large"/>
                <Input.Search className="reg-inp-tips3" placeholder="验证码" enterButton={ this.state.tip } onSearch={ this.sendCode.bind(this) } size="large"/>
                {/* <input type="text" name="" @input="inpDetection" v-model="codenum" class="code" placeholder="输入验证码" />
                <span class="osendCode" @click="sendCode">{{ tip }}</span> */}
                <Button className="reg-inp-tips4" type="primary" block size="large" onClick={ this.register.bind(this) }>注册</Button>
              </div>
              <p className="register-p3" onClick={ this.gologin.bind(this) }><span className="iconfont icon-arrow_left_fill"></span>登录</p>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Com;
